<!--
 * @Description: 分页组件
-->
<template>
  <div
    :class="[
      '_ehl_page',
      { _ehl_page_center: position === 'center' },
      { _ehl_page_left: position === 'left' },
      { _ehl_page_right: position === 'right' },
    ]"
  >
    <el-pagination
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :layout="layout"
      :total="total"
      :small="small"
      @size-change="sizeChange"
      @current-change="pageChange"
    >
    </el-pagination>
    <div v-if="layout.indexOf('jumper') > -1" class="cpt_btn_white">确定</div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import { Pagination } from 'element-ui'
  Vue.use(Pagination)
  export default {
    props: {
      currentPage: {
        type: Number,
        default: () => 1,
      },
      pageSize: {
        type: Number,
        default: () => 10,
      },
      pageSizes: {
        type: Array,
        default: () => [10, 20, 50, 100],
      },
      total: {
        type: Number,
        default: () => 0,
      },
      layout: {
        type: String,
        default: () => 'total, sizes, prev, pager, next, jumper',
      },
      position: {
        type: String,
        default: () => 'right',
      },
      small: {
        type: Boolean,
        default: () => false,
      },
    },
    methods: {
      sizeChange(size) {
        this.$emit('size-change', size)
        this.$emit('current-change', 1)
      },
      pageChange(page) {
        this.$emit('current-change', page)
      },
    },
  }
</script>
